import React, { useState, useEffect } from 'react';
import { 
  LayoutDashboard, Search, Bell, User, Settings, Menu, X,
  BarChart3, Leaf, Users, FileText, Target, TrendingUp, 
  AlertCircle, CheckCircle, Clock, ArrowRight, Filter,
  Download, Share2, Globe, Shield, Zap, Database,
  ChevronDown, Plus, Calendar, MessageSquare, Home,
  LogOut, HelpCircle, ExternalLink, Maximize2
} from 'lucide-react';

const IntegratedESGPlatform = ({ onBack }) => {
  // 打开新窗口独立系统
  const openStandaloneSystem = () => {
    // 在新窗口中打开完整的独立系统
    const currentOrigin = window.location.origin;
    const standaloneUrl = `${currentOrigin}/standalone/StandaloneESGSystem.html`;
    
    const newWindow = window.open(standaloneUrl, '_blank', 'width=1400,height=900,scrollbars=yes,resizable=yes');
    if (newWindow) {
      newWindow.focus();
    } else {
      // 如果弹窗被阻止，提供备选方案
      alert('请允许弹窗，或者手动访问: ' + standaloneUrl);
    }
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-purple-50">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        <div className="text-center mb-12">
          <div className="inline-flex items-center justify-center w-16 h-16 bg-gradient-to-r from-blue-600 to-purple-600 rounded-full mb-6">
            <Database className="h-8 w-8 text-white" />
          </div>
          <h1 className="text-4xl font-bold text-gray-900 mb-4">
            ESG智能管理平台
          </h1>
          <p className="text-xl text-gray-600 mb-8 max-w-3xl mx-auto">
            多产品经理协作的完整ESG平台整合原型，提供真实系统级别的用户体验
          </p>
          
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <button
              onClick={openStandaloneSystem}
              className="inline-flex items-center px-8 py-4 border border-transparent text-lg font-medium rounded-lg text-white bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 shadow-lg transition-all duration-200"
            >
              <ExternalLink className="h-5 w-5 mr-2" />
              在新窗口打开完整系统
            </button>
            
            {onBack && (
              <button
                onClick={onBack}
                className="inline-flex items-center px-6 py-3 border border-gray-300 text-base font-medium rounded-lg text-gray-700 bg-white hover:bg-gray-50 transition-all duration-200"
              >
                返回功能中心
              </button>
            )}
          </div>
        </div>

        {/* 系统预览截图 */}
        <div className="bg-white rounded-xl shadow-2xl overflow-hidden mb-16">
          <div className="bg-gray-800 px-4 py-3 flex items-center space-x-2">
            <div className="w-3 h-3 bg-red-500 rounded-full"></div>
            <div className="w-3 h-3 bg-yellow-500 rounded-full"></div>
            <div className="w-3 h-3 bg-green-500 rounded-full"></div>
            <div className="flex-1 text-center">
              <span className="text-white text-sm">ESG智能管理平台 - 完整系统预览</span>
            </div>
          </div>
          
          <div className="relative bg-gradient-to-br from-gray-100 to-gray-200 aspect-video flex items-center justify-center">
            <div className="text-center">
              <div className="grid grid-cols-2 gap-4 mb-6 max-w-md mx-auto">
                <div className="bg-white rounded-lg p-4 shadow-md">
                  <div className="w-8 h-8 bg-green-100 rounded-lg flex items-center justify-center mx-auto mb-2">
                    <Leaf className="h-4 w-4 text-green-600" />
                  </div>
                  <div className="text-xs font-medium text-gray-700">碳足迹管理</div>
                </div>
                <div className="bg-white rounded-lg p-4 shadow-md">
                  <div className="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center mx-auto mb-2">
                    <Shield className="h-4 w-4 text-blue-600" />
                  </div>
                  <div className="text-xs font-medium text-gray-700">合规管理</div>
                </div>
                <div className="bg-white rounded-lg p-4 shadow-md">
                  <div className="w-8 h-8 bg-purple-100 rounded-lg flex items-center justify-center mx-auto mb-2">
                    <Users className="h-4 w-4 text-purple-600" />
                  </div>
                  <div className="text-xs font-medium text-gray-700">产品工作台</div>
                </div>
                <div className="bg-white rounded-lg p-4 shadow-md">
                  <div className="w-8 h-8 bg-indigo-100 rounded-lg flex items-center justify-center mx-auto mb-2">
                    <FileText className="h-4 w-4 text-indigo-600" />
                  </div>
                  <div className="text-xs font-medium text-gray-700">ESG报告</div>
                </div>
              </div>
              <Database className="h-16 w-16 text-gray-400 mx-auto mb-4" />
              <h3 className="text-xl font-semibold text-gray-700 mb-2">完整系统预览</h3>
              <p className="text-gray-500 mb-6">包含所有模块的真实系统体验</p>
              <button
                onClick={openStandaloneSystem}
                className="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-lg text-white bg-blue-600 hover:bg-blue-700 transition-colors"
              >
                <ExternalLink className="h-4 w-4 mr-2" />
                打开完整系统
              </button>
            </div>
          </div>
        </div>

        {/* 系统特性展示 */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
          <div className="text-center">
            <div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mx-auto mb-4">
              <LayoutDashboard className="h-6 w-6 text-blue-600" />
            </div>
            <h3 className="text-lg font-semibold text-gray-900 mb-2">完整页面流</h3>
            <p className="text-gray-600">真实系统级别的完整页面流程，包含所有功能模块的详细交互</p>
          </div>
          
          <div className="text-center">
            <div className="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mx-auto mb-4">
              <Users className="h-6 w-6 text-green-600" />
            </div>
            <h3 className="text-lg font-semibold text-gray-900 mb-2">多模块整合</h3>
            <p className="text-gray-600">整合多个产品经理设计的模块，提供统一的用户体验</p>
          </div>
          
          <div className="text-center">
            <div className="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mx-auto mb-4">
              <Zap className="h-6 w-6 text-purple-600" />
            </div>
            <h3 className="text-lg font-semibold text-gray-900 mb-2">实时数据流</h3>
            <p className="text-gray-600">跨模块数据实时同步，展示真实的业务流程协作</p>
          </div>
        </div>

        {/* 协作流程展示 */}
        <div className="mt-16 bg-white rounded-lg shadow-lg p-8">
          <h3 className="text-2xl font-bold text-gray-900 mb-6 text-center">跨模块业务流程示例</h3>
          <div className="space-y-6">
            <div className="flex items-center space-x-4 p-4 bg-gray-50 rounded-lg">
              <div className="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center">
                <span className="text-green-600 font-bold text-sm">1</span>
              </div>
              <div className="flex-1">
                <h4 className="font-medium text-gray-900">年度ESG报告流程</h4>
                <p className="text-sm text-gray-600">数据收集(碳足迹) → 合规审核(合规) → 供应链评估(供应链) → 报告生成(报告) → 最终审核(ESG总监)</p>
              </div>
              <div className="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-xs font-medium">
                执行中 65%
              </div>
            </div>

            <div className="flex items-center space-x-4 p-4 bg-gray-50 rounded-lg">
              <div className="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center">
                <span className="text-blue-600 font-bold text-sm">2</span>
              </div>
              <div className="flex-1">
                <h4 className="font-medium text-gray-900">碳减排行动计划</h4>
                <p className="text-sm text-gray-600">基线评估(碳足迹) → 目标设定(ESG总监) → 供应商参与(供应链) → 合规检查(合规) → 计划实施(碳足迹)</p>
              </div>
              <div className="px-3 py-1 bg-gray-100 text-gray-800 rounded-full text-xs font-medium">
                规划中 25%
              </div>
            </div>

            <div className="flex items-center space-x-4 p-4 bg-gray-50 rounded-lg">
              <div className="w-8 h-8 bg-purple-100 rounded-full flex items-center justify-center">
                <span className="text-purple-600 font-bold text-sm">3</span>
              </div>
              <div className="flex-1">
                <h4 className="font-medium text-gray-900">产品功能发布协调</h4>
                <p className="text-sm text-gray-600">需求分析(产品) → ESG功能整合(环境) → 合规验证(合规) → 报告配置(报告) → 发布协调(产品)</p>
              </div>
              <div className="px-3 py-1 bg-green-100 text-green-800 rounded-full text-xs font-medium">
                进行中 80%
              </div>
            </div>
          </div>
        </div>

        {/* 产品经理协作说明 */}
        <div className="mt-16 bg-gradient-to-r from-blue-600 to-purple-600 rounded-lg text-white p-8">
          <h3 className="text-2xl font-bold mb-6 text-center">多产品经理协作模式</h3>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            <div className="text-center">
              <div className="w-12 h-12 bg-white bg-opacity-20 rounded-lg flex items-center justify-center mx-auto mb-3">
                <LayoutDashboard className="h-6 w-6 text-white" />
              </div>
              <h4 className="font-semibold mb-2">平台架构师</h4>
              <p className="text-blue-100 text-sm">整合原型、统一导航、数据管理</p>
            </div>
            <div className="text-center">
              <div className="w-12 h-12 bg-white bg-opacity-20 rounded-lg flex items-center justify-center mx-auto mb-3">
                <Leaf className="h-6 w-6 text-white" />
              </div>
              <h4 className="font-semibold mb-2">环境产品经理</h4>
              <p className="text-blue-100 text-sm">碳足迹管理模块</p>
            </div>
            <div className="text-center">
              <div className="w-12 h-12 bg-white bg-opacity-20 rounded-lg flex items-center justify-center mx-auto mb-3">
                <Users className="h-6 w-6 text-white" />
              </div>
              <h4 className="font-semibold mb-2">产品经理</h4>
              <p className="text-blue-100 text-sm">工作台系统</p>
            </div>
            <div className="text-center">
              <div className="w-12 h-12 bg-white bg-opacity-20 rounded-lg flex items-center justify-center mx-auto mb-3">
                <Shield className="h-6 w-6 text-white" />
              </div>
              <h4 className="font-semibold mb-2">合规产品经理</h4>
              <p className="text-blue-100 text-sm">合规管理模块</p>
            </div>
            <div className="text-center">
              <div className="w-12 h-12 bg-white bg-opacity-20 rounded-lg flex items-center justify-center mx-auto mb-3">
                <Globe className="h-6 w-6 text-white" />
              </div>
              <h4 className="font-semibold mb-2">供应链产品经理</h4>
              <p className="text-blue-100 text-sm">供应链ESG模块</p>
            </div>
            <div className="text-center">
              <div className="w-12 h-12 bg-white bg-opacity-20 rounded-lg flex items-center justify-center mx-auto mb-3">
                <FileText className="h-6 w-6 text-white" />
              </div>
              <h4 className="font-semibold mb-2">报告产品经理</h4>
              <p className="text-blue-100 text-sm">ESG报告模块</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default IntegratedESGPlatform; 